<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_2061828_n0jaivpt2yo.css">
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/zzc_headfoot.css">
  <link rel="stylesheet" href="./css/zzc_login.css">
  <script src="./js/jquery-1.11.3.js"></script>

</head>

<body>

  <div class="head">
    <div class="head_par">

      <div class="head_top">
        <p>成都融微设计方案系统</p>

        <div>
          <h1><i class="iconfont icon-ermai"></i>028-010-1212</h1>
          <h2>( 服务时间: 9:00-21:00 )</h2>
        </div>

      </div>

    </div>
  </div>

  <div class="second">
    <div class="second_par">

      <div class="second_login">
        <ul class="login_ul">
          <li class="active">
            <p>登录</p>
          </li>
          <li>
            <p>注册</p>
          </li>
        </ul>
        <!-- 登录 -->
        <div class="lo_shows active login">

          <form action="">
            <p>成都融微设计方案系统</p>

            <div class="login_div">
              <input type="text" name="" id="" placeholder="">
              <i class="iconfont icon-user"></i>
            </div>

            <div class="login_div">
              <input type="text" name="" id="">
              <i class="iconfont icon-mimasuo"></i>
            </div>

            <button>登录</button>
          </form>

          <div class="login_dis">
            <p> 没有账号？ <a href="">免费注册</a></p>
            <p> <a href="">忘记登录密码</a></p>
          </div>

        </div>
        <!-- 注册 -->
        <div class="lo_shows zhuce">

          <form action="">
            <p>成都融微设计方案系统</p>
            <!-- 姓名 -->
            <div class="login_div">
              <input type="text" name="" id="" placeholder="姓名">
              <i class="iconfont icon-user"></i>
            </div>
            <!-- 手机号 -->
            <div class="login_div">
              <input type="text" name="" id="" placeholder="手机号码">
              <i class="iconfont icon-shoujihaoma"></i>
            </div>
            <!-- 验证码 -->
            <div class="login_div  zhuce_yz">
              <input type="text" name="" id="" placeholder="验证码">
              <i class="iconfont icon-code"></i>
              <img src="./images/zzc_img/yz.png" alt="">
            </div>
            <!-- 短信验证码 -->
            <div class="login_div  zhuce_dx">
              <input type="text" name="" id="" placeholder="短信验证码">
              <i class="iconfont icon-duanxi"></i>
              <button>发送验证码</button>
            </div>
            <!-- 登录密码 -->
            <div class="login_div">
              <input type="text" name="" id="" placeholder="登录密码">
              <i class="iconfont icon-mimasuo"></i>
            </div>
            <!-- 确认密码 -->
            <div class="login_div">
              <input type="text" name="" id="" placeholder="确认密码">
              <i class="iconfont icon-mimasuo"></i>
            </div>

            <button>注册</button>
          </form>


          <div class="login_dis">
            <p> 没有账号？ <a href="">免费注册</a></p>
          </div>



        </div>

      </div>

    </div>


  </div>


  <div class="foot">
    <script>
      $(".foot").load("foot.html");
    </script>
  </div>

  <script>
    $(document).ready(function () {

      $(".login_ul li").click(function () {
        var index = $(".login_ul li").index(this);
        $(this).addClass('active').siblings().removeClass('active');
        $(".lo_shows").eq(index).addClass('active').siblings(".lo_shows").removeClass('active');
      })

    })
  </script>
</body>

</html>